import React, { Component } from 'react'
import { Dropdown, Menu, Space } from 'antd'
import { DownOutlined  } from '@ant-design/icons'
export default class MyDropdown extends Component{
  menu1 = (
    <Menu>
      <Menu.Item key="1">item1</Menu.Item>
      <Menu.Item key="2" icon={<DownOutlined />}>item2</Menu.Item>
      <Menu.Item key="3" disabled>item3</Menu.Item>
    </Menu>
  )
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Space size="large">
                <Dropdown overlay={this.menu1}>
                  <a href="javascript:;">hover me<DownOutlined /></a>
                </Dropdown>
                <Dropdown overlay={this.menu1} arrow>
                  <a href="javascript:;">hover me<DownOutlined /></a>
                </Dropdown>
              </Space>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">contextMenu</div>
          <div className="box-body">
            <div className="box-content">
              <Space size="large">
                <Dropdown overlay={this.menu1} trigger={['contextMenu']}>
                  <div style={{ width: '200px', height: '100px', backgroundColor: 'gray', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>click right mouse</div>
                </Dropdown>
              </Space>
            </div>
          </div>
        </div>
      </>
    )
  }
}